<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blogList.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
    <style>
        .layui-row{
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<!--导航栏-->
    <div class="nav">
        <div class="layui-row layui-col-space5">
            <div class="layui-col-md4">
                <div class="grid-demo grid-demo-bg1">
                    <div>
                        <img src="images/logo.png" alt="">
                        <span>个人博客系统</span>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="grid-demo"></div>
            </div>


            <div class="layui-col-md1">
                <div class="grid-demo grid-demo-bg1">
                    <img src="images/user.png" alt="">
                    <span id="user"></span>
                </div>
            </div>
            <div class="layui-col-md1">
                <div class="grid-demo grid-demo-bg1">
                    <a href="blogList.html">
                        <img src="images/collect.png" alt="">
                        <span>博客列表</span>
                    </a>
                </div>
            </div>
            <div class="layui-col-md1">
                <div class="grid-demo grid-demo-bg1">
                    <a href="blogEdit.html">
                        <img src="images/write.png" alt="">
                        <span>发布博客</span>
                    </a>
                </div>
            </div>
            <div class="layui-col-md1">
                <div class="grid-demo grid-demo-bg1">
                    <a href="logout">
                        <img src="images/logout.png" alt="">
                        <span>退出登录</span>
                    </a>
                </div>
            </div>
        </div>
    </div>


<!--内容-->
<div class="container">

</div>

<script>
    function getBlogs(){
        $.ajax({
            type: 'get',
            url: 'blog',
            success: function (body) {
                let container = document.querySelector('.container');
                for (let blog of body){
                    // 构造blog div
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';

                    // 构造博客标题
                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;

                    // 构造博客时间
                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = blog.postTime;

                    // 构造摘要
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.content;

                    // 构造查看全文按钮
                    let a = document.createElement('a');
                    a.href = 'blogDetail.html?blogId=' + blog.blogId;
                    a.innerHTML = '查看全文 &gt;&gt;';

                    // 进行拼装
                    blogDiv.appendChild(titleDiv);
                    blogDiv.appendChild(dateDiv);
                    blogDiv.appendChild(descDiv);
                    blogDiv.appendChild(a);
                    container.appendChild(blogDiv);
                }
            }
        });
    }
    getBlogs();

    getLoginStatus();

    // 获取当前用户的登录信息
    function userInfo(){
        $.ajax({
            type: 'get',
            url: 'userInfo',
            success: function (body){
                // 获取成功就是user对象,将user对象添加到页面上
                let user = document.querySelector('#user');
                user.innerHTML = body.username;
            }
        });
    }
    userInfo();
</script>
</body>

</html>